<template>
  <div class="productProgress">
    <div class="flex">
      <p class="name">{{ name }}</p>
      <p class="percentage">{{ percentage }}%</p>
    </div>
    <el-progress :percentage="percentage" :show-text="false" :color="color"></el-progress>
  </div>
</template>

<script>
export default {
  props: {
    percentage: {
      type: Number,
      default: 0
    },
    name: {
      type: String,
      default: '',
    },
    color: {
      type: String,
      default: '#FF7B00'
    }
  },
  data() {
    return {}
  },
}
</script>
<style lang="scss" scoped>
.productProgress {
  margin-bottom: 30px;
}
.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 11px 0 11px;
  p {
    color: #fff;
    font-size: 16px;
    font-family: PingFang SC;
  }
  .name {
    flex: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    -webkit-line-clamp: 1; /* 限制显示4行 */
    text-overflow: ellipsis;
  }
  .percentage {
    margin-left: 30px;
  }
}
/deep/.el-progress-bar__outer {
  height: 10px !important;
}
/deep/.el-progress-bar__inner {
  background-image: linear-gradient(to right, #0384F5, #0DF7F7);
}
</style>